<template>
  <div class="dashboard-container">
    <!-- 组题列表 -->
    <el-card>
      <!-- 组题表 -->
      <el-table :data="randomList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60px"></el-table-column>
        <el-table-column prop="addTime" label="组题时间" width="200px"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="120px"></el-table-column>
        <el-table-column prop="questionIDs" label="试题ID">
          \
          <template v-slot="scope">{{scope.row.questionIDs.join(', ')}}</template>
        </el-table-column>
        <el-table-column prop="progressOfAnswer" label="答题进度" width="90px">
          <template v-slot="scope">{{scope.row.progressOfAnswer + '%'}}</template>
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率" width="90px">
          <template v-slot="scope">{{scope.row.accuracyRate + '%'}}</template>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题总耗时(秒)" width="120px"></el-table-column>
        <el-table-column prop="questionType" label="组题类型/详情" width="300px"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template v-slot="scope">
            <el-button type="primary" size="mini" @click="removeRandom(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[20, 50, 100, 400]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsRandoms',
  data() {
    return {
      randomList: [],
      queryInfo: {
        page: 1,
        pagesize: 5,
        keyword: ''
      },
      total: null
    }
  },
  methods: {
    async getRandoms() {
      const params = this.queryInfo
      const { data: res } = await randoms(params)
      this.randomList = res.items
      this.total = res.counts
      // 处理 item 中的数据格式
      console.log(res)
      console.log('修改不了页数 后台扣工资!')
      
    },
    // 删除组题弹框
    async removeRandom(row) {
      const confirm = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirm === 'confirm') {
        await removeRandoms(row)
        this.$message.success('已删除')
        this.getRandoms()
      } else {
        this.$message.info('删除已取消')
      }
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getRandoms()
    },
    handleCurrentChange(nowPage) {
      this.queryInfo.page = nowPage
      this.getRandoms()
    }
  },
  created() {
    this.getRandoms()
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 10px;
}
.el-table {
  margin: 10px 0;
}
</style>
